<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
    <script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css"/>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>用户信息</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-10">
            <button type="button" class="btn btn-primary btn-sm" onclick="openModal()">
                新增
            </button>
        </div>
    </div>

    <table class="table table-hover">
        <tr class="row">
            <th class="col-md-1">NO</th>
            <th class="col-md-1">id</th>
            <th class="col-md-4">username</th>
            <th class="col-md-4">password</th>
            <th class="col-md-2">操作</th>
        </tr>

        <c:forEach items="${pageInfo.list}" var="user" varStatus="status">
            <tr class="row">
                <td class="col-md-1">${status.index+1}</td>
                <td class="col-md-1">${user.id}</td>
                <td class="col-md-4">${user.username}</td>
                <td class="col-md-4">${user.password}</td>
                <td class="col-md-2">
                    <button type="button" class="btn btn-primary btn-xs" onclick="editById(${user.id})">修改</button>
                    <button type="button" class="btn btn-danger btn-xs" onclick="deleteById(${user.id})">删除</button>
                </td>
            </tr>
        </c:forEach>
    </table>

    <%--分页开始--%>
    <div class="row">
        <div class="col-md-6">
            当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <c:if test="${pageInfo.pageNum != 1}">
                        <li>
                            <a href="${APP_PATH}/userPage?pn=1">首页</a>
                        </li>
                    </c:if>
                    <c:if test="${pageInfo.pageNum == 1}">
                        <li class="disabled">
                            <span>
                                <span aria-hidden="true">首页</span>
                            </span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum != 1}">
                        <li>
                            <a href="${APP_PATH}/userPage?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>

                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
                        <c:if test="${pageInfo.pageNum == page_num}">
                            <li class="active">
                                <span>${page_num} <span class="sr-only">(current)</span></span>
                            </li>
                            <%--<li class="active"><a href="${APP_PATH}/userPage?pn=${page_num}">${page_num}</a></li>--%>
                        </c:if>
                        <c:if test="${pageInfo.pageNum != page_num}">
                            <li><a href="${APP_PATH}/userPage?pn=${page_num}">${page_num}</a></li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${pageInfo.pageNum != pageInfo.pages}">
                        <li>
                            <a href="${APP_PATH}/userPage?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum != pageInfo.pages}">
                        <li>
                            <a href="${APP_PATH}/userPage?pn=${pageInfo.pages}">尾页</a>
                        </li>
                    </c:if>
                    <c:if test="${pageInfo.pageNum == pageInfo.pages}">
                        <li class="disabled">
                            <span>
                                <span aria-hidden="true">尾页</span>
                            </span>
                        </li>
                    </c:if>
                </ul>
            </nav>
        </div>
    </div>
    <%--分页结束--%>

    <%--新增模态框开始--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="myModalForm">
                        <div class="form-group">
                            <label for="username_add_input" class="col-sm-2 control-label">username</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username_add_input" name="username"
                                       placeholder="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password_add_input" class="col-sm-2 control-label">password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password_add_input" name="password"
                                       placeholder="password">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="user_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <%--新增模态框结束--%>

    <%--修改模态框开始--%>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="editModalLabel">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="editModalForm">
                        <input type="hidden" id="id_edit_input" name="id" />
                        <div class="form-group">
                            <label for="username_add_input" class="col-sm-2 control-label">username</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username_edit_input" name="username"
                                       placeholder="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password_add_input" class="col-sm-2 control-label">password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password_edit_input" name="password"
                                       placeholder="password">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="user_edit_btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <%--修改模态框结束--%>

</div>

<script>
    // 打开模态框
    function openModal() {
        $("#myModalForm")[0].reset();
        $('#myModal').modal({
            backdrop: "static"
        });
    }

    // 新增模态框保存
    $("#user_save_btn").click(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/saveUser",
            data: $("#myModalForm").serialize(),
            type: "POST",
            async: false,
            success: function (response) {
                if (response.status == 500) {
                    $('#myModal').modal('hide');
                    window.location = "${APP_PATH}/userPage";
                } else {
                    alert(response.data);
                }
            }
        });
    });

    // 根据id删除
    function deleteById(userid) {
        $.ajax({
            url: "${pageContext.request.contextPath}/deleteById",
            data: {id : userid},
            type: "GET",
            async: false,
            success: function (response) {
                if (response.status == 500) {
                    window.location = "${APP_PATH}/userPage";
                } else {
                    alert(response.data);
                }
            }
        });
    }

    // 修改
    function editById(userid){
        $("#editModalForm")[0].reset();

        var flag = false;
        $.ajax({
            url: "${pageContext.request.contextPath}/getUserById",
            data: {id : userid},
            type: "GET",
            async: false,
            success: function (response) {
                if (response.status == 500) {
                    $("#id_edit_input").val(response.data.id);
                    $("#username_edit_input").val(response.data.username);
                    $("#password_edit_input").val(response.data.password);
                    flag = true;
                } else {
                    alert(response.data);
                }
            }
        });

        if(flag) {
            $('#editModal').modal({
                backdrop: "static"
            });
        }
    }

    // 修改模态框保存
    $("#user_edit_btn").click(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/updateUser",
            data: $("#editModalForm").serialize(),
            type: "POST",
            async: false,
            success: function (response) {
                if (response.status == 500) {
                    $('#editModal').modal('hide');
                    window.location = "${APP_PATH}/userPage";
                } else {
                    alert(response.data);
                }
            }
        });
    });

</script>

</body>
</html>
